import React, {Component} from 'react';
import {  Checkbox } from 'antd-mobile';
import { connect } from 'react-redux'

import { cartCountAdd,cartCountReduce } from '../../store/actions/cart'

const CheckboxItem = Checkbox.CheckboxItem;

@connect(null,{cartCountAdd,cartCountReduce})
class CartItem extends Component {
    render() {
        const {
            id,
            name,
            price,
            checkinfo,
            count,
            img
        }=this.props
        return (
            <li className="pro-cart-item">
                <CheckboxItem key='1' >
                </CheckboxItem>
                <div className="pro-cart-item-img">
                    <img src={img} alt="name"/>
                </div>
                <div className="pro-cart-item-des">
                    <h2>{name}</h2>
                    <div className="checkinfo">{checkinfo}</div>
                    <div className="price">
                        <span className="p-price">￥{price}</span>
                        <div className="count">
                            <span
                                className="btn-reduce"
                                onClick={this.props.cartCountReduce.bind(this,id)}
                            >-</span>
                            <span className="counter">{count}</span>
                            <span
                                className="btn-add"
                                onClick={this.props.cartCountAdd.bind(this,id)}
                            >+</span>
                        </div>
                    </div>

                </div>
            </li>
        );
    }
}

export default CartItem;